<template>
<!-- 个人健康档案 -->
    <div class="main">
        <div class="form-container">
            <div class="form-main">
                <span class="one_title">&nbsp;&nbsp;二、健康情况&nbsp;&nbsp;</span>
                <div class="personnelType">
                   
                    <label for="contact" class="littleTile">1.健康类型</label> <span class="required" style="color:red">*</span> <br/>
                    <div class="form-border form-twoBor">
                        <div>
                            <el-radio v-model="personnelType" label="3">正常</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9; " >
                            <el-radio v-model="personnelType" label="0">确诊</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="personnelType" label="1">疑似</el-radio>
                        </div>
                        <div style="border-top: 1px solid #c6c8c9;" >
                            <el-radio v-model="personnelType" label="2">密接</el-radio>
                        </div>
                    </div>
                </div>
                <div class="fever">
                   
                    <label for="contact">2.是否发热（发热指体温>=37.3℃）</label> <span class="required" style="color:red">*</span> <br/>
                    <div class="form-border form-twoBor">
                        <div style="border-bottom: 1px solid #bfbfbf;">
                            <el-radio v-model="fever" @change="temperature=''" label="0">否</el-radio>
                        </div>
                        <div>
                            <el-radio v-model="fever" label="1">是</el-radio>
                        </div>
                    </div>
                </div>
				<div id="temperatureId" v-if="fever==1">
                   	<label for="gender" required>3. 体温</label><span class="required" style="color:red">*</span> <br/>
                   	<input class="form-border" id="temperature" type="text" maxlength="4" placeholder="请填写体温, 如: 37.0 " v-model="temperature"  /> <br/>
                </div>
				<div class="controls">
                    <label for="controls"><span v-if="fever==1">4</span><span v-else>3</span>. 其他症状</label><br/>
                    <div class="form-border tizheng clearfix">
						<div>
							<el-checkbox  v-model="symptom" label="乏力"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="干咳"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="肌肉酸痛"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="寒战"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="呼吸困难"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="咽痛"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="头疼"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="眩晕"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="腹痛"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="腹泻"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="恶心"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="呕吐"></el-checkbox>
						</div>
						<div>
							<el-checkbox  v-model="symptom" label="鼻塞"></el-checkbox>
						</div>
						<!-- <div>
							<el-checkbox  v-model="symptom" label="无"></el-checkbox>
						</div> -->
					</div>
                </div>
                <div class="other_life_needs">
                    <!-- <span class="required" style="color:red">*</span>  -->
                    <label for="other_life_needs"><span v-if="fever==1">5</span><span v-else>4</span>. 其他需要报告的情况或需要救援的情况</label><br/>

                    <div class="form-border form-twoBor">
						<div class="textAreaBox">
							<textarea name="clueCon" id="" maxlength="255"
										v-model="remark" placeholder=""></textarea>
							<span>{{remnant}}/255</span>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { newquestionnaireData ,queryCityData} from '@/assets/js/service'
import { Confirm , Datetime,PopupPicker,Popup} from 'vux'

export default {
    components: {
        Confirm,
        Datetime,
        PopupPicker,
        Popup
    },
    data () {
        return {
            personnelType:'3',//人群类型
			fever:'0',//是否发热（体温>=37.3℃）
			temperature:'',//体温
			symptom:[],//其他症状
			remark:'',//其他需要报告的情况
			remnant:0,//其他字数
        }
    },
    created () {
        let arr = JSON.parse(localStorage.getItem('enterpriseHomeData'))
		if(arr) {
            let personInfo = JSON.parse(arr[0])
            this.personnelType = personInfo.personnelType;
            this.fever = personInfo.fever;
            this.temperature = personInfo.temperature;
            this.symptom = personInfo.symptom.split(",");
            this.remark = personInfo.remark;
            this.emnant = this.remark.length;
        }
    },
    mounted: function () {
    },
    watch:{
		remark(){
			this.remnant=this.remark.length;
		},

    },
    methods: {

    }
}
</script>
<style lang="less" scoped>

.main{
    overflow: hidden;
    // background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: #f8fafb;
        background-size: 100% 100%;
        width: calc(100% -16px);
        border-radius: 8px;
        border: solid 1px #e5e5e5;
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        // margin-bottom: 10px;
        padding-bottom: 25px;
        .form-main{
            width: 100%;
            padding: 0 20px;
            color: #333;
            padding-top: 40px;
            border-radius: 8px;
            position: relative;
            background-color: #f5f8fa;
            label{
                font-size: 15px;
				font-weight: bold;
            }
            h4{
                margin-top: 15px;
            }
            .one_title{
				height: 30px;
				line-height: 21px;
				display: block;
				position: absolute;
				font-size: 17px;
				font-weight: 700;
				top: 0;
				left: 10px;
				border-bottom-left-radius: 12px;
				border-bottom-right-radius: 12px;
				padding: 4px 0;
				background: rgba(119,136,153,.2);
			}
			 .littleTile{
				font-size: 15px;
				font-weight: bold;
			}
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
                box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8);
            }
            .tizheng{
                div{
                    width: 33.33%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 10px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
    }
   
	.textAreaBox {
		position: relative;
		height: 8em;
		padding: 0;
		z-index: 2;
		textarea {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 10px;
		}
		span {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			color: #ccc;
		}
	}
.yy-input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: red;
  }
    
}
</style>